<template>
  <div id="package">
    <Myheader :page="page"></Myheader>
     <group>
      <div class="index-topf"><h2>PB衫邮寄申请</h2>  </div>
    <x-input title="姓名" v-model="name"></x-input>
    <x-input is-type="china-mobile" title="手机号码" v-model="mobile"></x-input>
    <x-input title="证件号" v-model="idnumber"></x-input>
    <x-input title="邮寄地址" v-model="adress"></x-input>
     <selector ref="defaultValueRef" title="服装尺寸" :options="clothList" v-model="clothsize"></selector>
     <div class="info" >
       <div style="padding-left:10px" v-html='subject'></div>
       <div v-html='content'></div>
     </div>
    <div style="padding-left:10px;padding-right:10px" ><XButton type="primary" :disabled="flag" @click.native="post">支付1元邮费</XButton></div>
  </group>
  </div>
</template>


<script>
/* eslint-disable*/
//axios
import qs from "qs";
import { axios } from "@/api/axios.js";
import Myheader from "@/common/components/myheader.vue";
import { indexedDB } from "@/api/indexedDB.js";

import { dateStringToDateTime } from "@/common/js/main.js";
import { XButton, CellFormPreview, Group, Cell, XInput, Selector } from "vux";
import Index from "./index";
import { fail } from "assert";
import mixin from '@/common/js/mixin.js'
export default {
  mixins: [mixin],
  props: ["page", "host"],
  components: {
    CellFormPreview,
    Group,
    Cell,
    XButton,
    Myheader,
    XInput,
    Selector
  },
  data() {
    return {
      name: "",
      mobile: "",
      idnumber: "",
      adress: "",
      clothsize: "",
      clothList: ["XS", "S", "M", "L", "XL", "XXL", "XXXL"],
      subject:'',
      content:''
    };
  },
  created() {
    console.log(this.page.raceid);
    this.ArticleInfo();
  },
  computed: {
    flag: function() {
      if (
        this.name != "" &&
        /^1[34578]\d{9}$/.test(this.mobile) &&
        this.idnumber.length >= 4 &&
        this.adress != "" &&
        this.clothsize != ""
      ) {
        return false;
      } else {
        return true;
      }
    }
  },
  methods: {
    ArticleInfo: function() {
      this.axios
        .post(
          `${window.host}page/query`,
          qs.stringify({
            id: 151
          })
        )
        .then(response => {
          console.log(response.data.code)
          if(response.data.code==200){
            
            
            this.content=response.data.data.content
            this.subject=response.data.data.subject
            console.log(this.subject)
            //console.log(response.data.data.content)
            //console.log(response.data.data.subject)
          }else{

          }
          
          
         
          
          
          
        });
    },
    post() {
      let _this = this;
      this.axios
        .post(
          `${window.host}/package/apply`,
          qs.stringify({
            idnum: this.idnumber,
            name: this.name,
            mobile: this.mobile,
            address: this.adress,
            clothsize: this.clothsize,
            raceid: this.page.raceid,
            type:'pb'
          })
        )
        .then(response => {
          if (response.data.code == 200) {
            window.location.href = response.data.data.payurl;
          } else {
            _this.$vux.toast.show({
              type: "warn",
              text: response.data.msg,
              onHide() {}
            });
          }
        });
    }
  }
};
</script>

<style lang="less" rel="stylesheet/less">
#package .vux-selector {
  background: #f9f9f9;
}

#package {
  h2 {
    font-size: 30px;
    margin: 30px 0 30px 10px;
    text-align: center;
    color: #3cc51f;
    margin-top: 0;
  }
  // 去除group的margintop
  .top-group {
    width: 100%;
  }
  .index-topf {
    padding-top: 30px;
    padding-bottom: 10px;
    .tips {
      padding: 10px 15px;
    }
  }
}

.info p {
  padding-left: 10px;
  padding-right: 10px;
  background: white;
  font-size: 16px;
  padding-top: 10px;
  padding-bottom: 10px;
}
</style>